<route lang="json5">
{
  meta: {
    auth: true,
  },
}
</route>
<style></style>
<template>
  <div class="h-full flex flex-col">
    <div class="flex items-center overflow-x-scroll">
      <a-form :model="filterInfo" layout="inline">
        <a-form-item field="str1" label="str1">
          <a-input v-model="filterInfo.str1" placeholder="please enter str1" />
        </a-form-item>
        <a-form-item field="str2" label="str2">
          <a-input v-model="filterInfo.str2" placeholder="please enter str2" />
        </a-form-item>
        <a-form-item field="type1" label="type1">
          <a-select v-model="filterInfo.type1" placeholder="Please select type1" multiple allow-clear>
            <a-option :value="0">type-0</a-option>
            <a-option :value="1">type-1</a-option>
            <a-option :value="2">type-2</a-option>
            <a-option :value="3">type-3</a-option>
          </a-select>
        </a-form-item>
        <a-form-item field="type2" label="type2">
          <a-radio-group type="button" v-model="filterInfo.type2">
            <a-radio :value="0">type-0</a-radio>
            <a-radio :value="1">type-1</a-radio>
            <a-radio :value="2">type-2</a-radio>
            <a-radio :value="3">type-3</a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item field="date1" label="date1" class="  ">
          <a-date-picker v-model="filterInfo.date1" placeholder="Please select date1" />
        </a-form-item>
        <a-form-item field="date2" label="date2">
          <a-range-picker v-model="filterInfo.date2" show-time v-bind="_DATE_PICKER_DEFAULT" />
        </a-form-item>
      </a-form>
      <a-button @click="router.push({ path: '/often/table/add' })" status="warning" class="mr-2">新增</a-button>
      <a-button @click="getData">刷新</a-button>
    </div>
    <use-n-progress :inanimate="inDebounce" />
    <a-table
      class="!h-0 flex-1"
      :scroll="{ y: '100%', x: '100%' }"
      :pagination="pagination"
      :data="dataList"
      v-on="handlePageChange"
      row-key="id"
      :virtual-list-props="{ height: '100%' }"
    >
      <template #columns>
        <a-table-column title="字段名" data-index="name" :width="100" />
        <a-table-column v-for="(item, i) in pageSize" :title="`第${i}条`" :data-index="`value-${i}`" :width="200" />
      </template>
    </a-table>
  </div>
</template>

<script lang="ts" setup>
import { getWMockList, type IGetMockList } from 'api/test1'

const _DATE_PICKER_DEFAULT = DATE_PICKER_DEFAULT
const router = useRouter()
const DefaultFilter = {
  str1: '',
  str2: '',
  type1: 0,
  type2: 0,
  date1: '',
  date2: [],
}

const { dataList, filterInfo, pageSize, inDebounce, pagination, handlePageChange, getData } = useGetData<
  IGetMockList,
  typeof DefaultFilter
>(getWMockList, DefaultFilter, {
  usePagination: false,
  resListFormat: (e) => transposeObjList(e), //  ['id', 'col1', 'col2']
})
</script>
